<template>
  <div>
    <dl v-show="pokemonData?.data.length != 0">
      <div class="shadow margin-20 padding-20 container roundy-10" v-for="(p, index) of pokemonData?.data" :key="index" :pokemon="p">
        <dt>
          <a @click="clickPokemonName(p)">{{p.nameZh}}</a>
        </dt>
        <dd> 
          <p>{{p.nameEn}} {{p.nameJa}}</p>
          <p>{{p.detail.category}}, 属性: {{p.type1}} {{p.type2}}</p>
        </dd>
      </div>
    </dl>
    <div class="margin-20 font-size-25" v-show="pokemonData?.data.length == 0">没有搜索到任何内容。</div>
  </div>
  
</template>

<script>
//import router from '@/router'
export default {
    name: "PokemonSearchResult",
    props: ['pokemonData', 'setCurrentPokemon'],
    methods:{
      clickPokemonName(pokemon){
        /*调用父组件通过props传递下来的方法
        告诉父组件是哪个宝可梦被点击了*/
        this.setCurrentPokemon(pokemon)
        //路由跳转至宝可梦信息界面
        this.$router.push({
          path: '/pokemonInfo',
        })
      }
    }
}


</script>

<style lang="less" scoped>
@margin: 20px;

.container {
    margin-top: @margin;
    margin-bottom: @margin;
    margin-left: @margin;

    background-color: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(5px);
}

dt {
  font-size: 1.2em;
  color: #0400d8;
}

dd {
  margin-left: 0;
  margin-top: 10px;
  line-height: 1em;
}

a {
  text-decoration: underline;
  cursor: pointer;
}
</style>